<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="headding">
			<view class="header"><span class="header-s">订单</span></view>
			<view class="seach">
				<view class="seach-s">
					<image src="../../static/images/tb_search.png" mode=""></image>
					<input type="text" value="" placeholder="请输入关键词..." v-model="seach" />
				</view>
				<view class="seach-e"></view>
			</view>
			<view class="classify">
				<view class="classify-l" @click="calendar">
					{{ mad }}
					<image src="../../static/slice/1.png" mode=""></image>
				</view>
				<view class="classify-l" @click="showdow">
					{{ allUser }}
					<image src="../../static/slice/1.png" mode=""></image>
				</view>
				<view class="classify-l" @click="showding">
					{{ ding }}
					<image src="../../static/slice/1.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 下拉框 -->
		<view v-show="showd" class="combobox">
			<view class="show-li" @click="shae(1)">全部订单</view>
			<view class="show-li" @click="shae(2)">欠货订单</view>
			<view class="show-li" @click="shae(3)">已完成</view>
			<view class="show-li" @click="shae(4)">已关闭</view>
			<view class="show-li" @click="shae(5)">退货单</view>
		</view>
		<!-- 下拉框 -->
		<view v-show="show" class="combobox">
			<view class="show-li" @click="usd()">全部员工</view>
			<view class="show-li" v-for="item in Userarry" :key="item.user_id" @click="user(item)">{{ item.name }}</view>
		</view>
		<view class="ima" v-show="wd"><image src="../../static/slice/86438f8f6d0029f503d57efb448590f.png" mode=""></image></view>
		<view class="max">
			<!-- 订单数据 -->
			<view class="ind-wd" v-for="item in arry" @click="goDetails(item)">
				<view class="h-box">
					<view class="">订单号:{{ item.order_no }}</view>
					<image :src="fan(item)" mode=""></image>
				</view>
				<view class="b-box">
					<view class="bod">{{ item.customer_name.charAt(0) }}</view>
					<view class="">
						<view class="">{{ item.customer_name }}</view>
						<view class="">{{ item.create_time | birtime }}</view>
					</view>
					<view class="qian">{{ qianhuo(item) }}</view>
				</view>
				<view class="l-box">
					<view class="">{{ jine(item) }}</view>
					<view class="">{{ huo(item) }}</view>
				</view>
				<view class="da">{{ dan(item) }}</view>
					<view class="cloes"><image :src="item.is_close==1 ? '../../static/client/close.png':''" mode=""></image></view>
			</view>
		</view>
		<!-- 日历弹框 -->
		<view class="tankuang" v-show="timeshow">
			<view class="t-o">选择时间</view>
			<view class="t-w">
				<view class="t-left">开始时间</view>
				<view @click="showcalendar(0)">{{ fulldate }}</view>
			</view>
			<view class="t-w">
				<view class="t-left">结束时间</view>
				<view @click="showcalendar(1)">{{ endTime }}</view>
			</view>
			<view class="t-s">
				<view class="s-left" @click="closetimes">取消</view>
				<view class="s-right" @click="trueTimes">确定</view>
			</view>
		</view>

		<!-- 日历 -->
		<view class="mycalendar" :style="{ top: insert ? '0' : '100%' }">
			<uni-calendar :lunar="true" :start-date="'1998-3-19'" :end-date="'2099-5-20'" @change="change"></uni-calendar>
		</view>
		<view class="meng" v-show="meng"></view>
	</view>
</template>

<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	components: {
		uniIcons,
		uniCalendar
	},
	data() {
		return {
			seach: '',
			// dan:'',
			// huo:'欠货:2',
			// jine:'订单金额',
			allUser: '全部员工',
			timeshow: false,
			insert: false,
			fulldate: '00',
			type: 0,
			endTime: '00',
			show: false,
			showtru: true,
			wd: false, //订单数据
			Userarry: {},
			meng: false,
			showd: false,
			ding: '全部订单',
			data: {},
			filter_type: 0,
			user_id: 0,
			arry: {},
			ady: {},
			mad: '所有时间段'
		};
	},
	onLoad() {
		this.showUser();
	},
	onShow() {
		this.showLi();
	},
	watch: {
		seach(newValue, oldValue) {
			this.arry = this.ady;
			this.seach = newValue;
			this.arry = this.arry.filter(item => {
				return item.customer_name.indexOf(this.seach) !== -1;
			});
		}
	},
	methods: {
		calendar() {
			if (this.timeshow) {
				this.timeshow = false;
				this.show = false;
				this.showd = false;
			} else {
				this.timeshow = true;
				this.show = false;
				this.showd = false;
			}
		},
		trueTimes() {
			this.timeshow = false;
			this.mad = this.fulldate + '-' + this.endTime;
			this.showLi();
		},
		usd() {
			this.allUser = '全部员工';
			this.show = false;
			this.user_id = 0;
			this.showLi();
		},
		closetimes() {
			this.fulldate = '00';
			this.endTime = '00';
			this.mad = '所有时间段';
			this.timeshow = false;
			this.showLi();
		},
		shae(e) {
			this.showd = false;
			if (e == 1) {
				this.ding = '全部订单';
				this.filter_type = 0;
			}
			if (e == 2) {
				this.ding = '欠货订单';
				this.filter_type = 1;
			}
			if (e == 3) {
				this.ding = '已完成';
				this.filter_type = 2;
			}
			if (e == 4) {
				this.ding = '已关闭';
				this.filter_type = 3;
			}
			if (e == 5) {
				this.ding = '退货单';
				this.filter_type = 4;
			}
			this.showLi();
		},
		showcalendar(type) {
			this.type = type;
			(this.insert = true), (this.timeshow = true);
			this.timeshow = false;
			this.showd = false;
			this.meng = true;
		},
		change(e) {
			(this.meng = false), (this.timeshow = true);
			this.insert = false;
			if (this.type == 0) {
				this.fulldate = e.fulldate;
			} else {
				this.endTime = e.fulldate;
			}
		},

		showding() {
			this.showd = !this.showd;
			this.timeshow = false;
			this.show = false;
		},
		user(e) {
			// console.log(e);
			this.allUser = e.name;
			this.user_id = e.user_id;
			this.show = false;
			this.showLi();
		},
		goDetails(item) {
			// console.log(123);
			uni.navigateTo({
				url: '../clientservice/Details'
			});
		
			uni.setStorageSync('line', item);
		},
		showdow() {
			if (this.show) {
				this.show = false;
				this.timeshow = false;
			} else {
				this.show = true;
				this.timeshow = false;
			}
		},
		showUser() {
			this.$ajax('api/v1.user/index', {})
				.then(res => {
					this.Userarry = res.result;
					// console.log(this.Userarry);
					// console.log(res);
				})
				.catch(res => {
					console.log(Error);
				});
		},
		jine(item) {
			// console.log(item);
			if (item.order_type == 1) {
				return '订单金额:￥' + item.order_sum;
			}
			if (item.order_type == 2) {
				return '本次应退:￥' + item.payable;
			}
			if (item.order_type == 3) {
				return '本次应退:￥' + item.payable;
			}
		},
		qianhuo(item) {
			// console.log(item);
			if (item.order_type == 1) {
				if (item.owe_num == 0) {
					return '已完成';
				} else {
					return '欠货' + item.owe_num;
				}
			}
			if (item.order_type == 2) {
				return;
			}
			if (item.order_type == 3) {
				return;
			}
		},
		huo(item) {
			// console.log(item);
			if (item.order_type == 1) {
				if (item.owe_num == 0) {
					return '退欠货:' + item.return_num;
				}
			}
			if (item.order_type == 2) {
				return '退货:' + item.order_num;
			}
			if (item.order_type == 3) {
				return '退欠货:' + item.order_num;
			}
		},
		fan(item) {
			if (item.order_type == 1) {
				return '../../static/images/icon_staple.png';
			}
			if (item.order_type == 2) {
				return '../../static/client/tui.png';
			}
			if (item.order_type == 3) {
				return '../../static/slice/gai.png';
			}
		},
		dan(item) {
			
			if (item.order_type == 1) {
				return '开单:' + item.owe_num;
			}
			if (item.order_type == 2) {
				return;
			}
			if (item.order_type == 3) {
				return;
			}
		},
		showLi() {
			let parems = {
				page_size: 50,
				user_id: this.user_id,
				filter_type: this.filter_type
			};
			if (this.fulldate != '00') {
				parems.start_time = this.fulldate;
			}
			if (this.endTime != '00') {
				parems.end_time = this.endTime;
			}
			this.$ajax('api/v1.order/index', parems)
				.then(res => {
					// console.log(res);
					this.arry = res.result.page_list;
					this.ady = res.result.page_list;
				})
				.catch(res => {
					console.log(Error);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.da {
	margin-top: 20rpx;
}
.max {
	margin-top: 360rpx;
}
.headding {
	top: 0;
	position: fixed;
	z-index: 33;
}
.bod {
	margin-right: 30rpx;
	line-height: 100rpx;
	text-align: center;
	width: 100rpx;
	height: 100rpx;
	background-color: #249af6;
	color: #ffffff;
	border-radius: 50%;
}
.header {
	// width: 750rpx;
	background-color: #249af6;
	padding: 60upx 0 30upx 0;
	text-align: center;
	.header-s {
		width: 143rpx;
		height: 34rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 48rpx;
	}
}
.seach {
	width: 750rpx;
	height: 107rpx;
	background-color: #249af6;
	padding-left: 32rpx;
	display: flex;

	.seach-s {
		width: 700rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 99999rpx;
		padding-left: 27rpx;
		display: flex;
		box-sizing: border-box;
		input {
			padding-top: 10rpx;
			border-style: none;
			padding-left: 34rpx;
		}
		image {
			width: 31rpx;
			height: 28rpx;
			margin-top: 15rpx;
			margin-right: 20rpx;
		}
	}
	.seach-e {
		image {
			width: 44rpx;
			height: 44rpx;
			margin-top: 12rpx;
			margin-left: 10rpx;
		}
	}
}
.classify {
	display: flex;
	background-color: #ffffff;
	justify-content: space-around;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	height: 90rpx;
	line-height: 90rpx;
	image {
		width: 17rpx;
		height: 10rpx;
		margin-left: 11rpx;
	}
}

.meng {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.5;
	z-index: 10;
}
.ima {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 227rpx;
	image {
		width: 370upx;
		height: 390upx;
	}
}
.tankuang {
	width: 642rpx;
	height: 400rpx;
	position: fixed;
	background-color: #ffffff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	.t-o {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 3rpx solid #eeeeee;
	}
	.t-w {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-around;
		border-bottom: 3rpx solid #eeeeee;
		.t-left {
			color: #666666;
		}
	}
	.t-s {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-evenly;
		.s-left {
			color: #666666;
		}
		.s-right {
			color: #249af6;
		}
	}
}
.timeshow {
	display: none;
}
.mycalendar {
	width: 100%;
	height: 100%;
	position: fixed;
	bottom: 0;
	transition: all 0.5s;
	z-index: 888;
}
.combobox {
	z-index: 2;

	width: 100%;
	background-color: #ffffff;
	position: fixed;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 48rpx;
	padding-left: 30rpx;
	.show-li {
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 2rpx solid #eeeeee;
		image {
			width: 38rpx;
			height: 32rpx;
			margin: 50rpx;
			float: right;
		}
	}
}
.ind-wd {
	height: 386rpx;
	background-color: #ffffff;
	margin-top: 20rpx;
	padding: 0 33rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	position: relative;

	.cloes {
		position: absolute;
		right: 100rpx;
		bottom: 98rpx;
		image {
			width: 113rpx;
			height: 99rpx;
		}
	}
	.h-box {
		height: 103rpx;
		line-height: 103rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #cccccc;
		image {
			width: 42rpx;
			height: 42rpx;
			margin-top: 30rpx;
		}
	}
	.b-box {
		margin-top: 21rpx;
		display: flex;
		line-height: 48rpx;
		position: relative;
		image {
			width: 100rpx;
			height: 100rpx;
			margin-right: 37rpx;
		}
		.qian {
			position: absolute;
			right: 30rpx;
			color: red;
		}
	}
	.l-box {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
	}
}

.show {
	display: none;
}
.show-li:hover {
	color: #249af6;
}
.showtrue {
	display: none;
}
</style>
